import React,{useState} from 'react'
import Nav from '../nav/Nav'
import Title from '../title'
import ImageFallback from './Lieimg'
import './Fimage.css'
const Fimage=({items,title}:any)=> {
    const [selectedIndex, setSelectedIndex] = useState<number>(0);
 
  return (
    <div className='Fimg_box'>
        <div className='Fimg_top'>
          {/* title */}
          <div >
             <Title title={title}/>
          </div>
      {/* nav */}
       <div className='Fimg_nav'>
        <Nav items={items} onSelect={setSelectedIndex} selectedIndex={selectedIndex} />
       </div>
      </div>

      {/* tu */}
      <div className='Fimg_tu'>
        {/* 根据当前选中的索引 (selectedIndex) 渲染对应项的图片列表 */}
        {items[selectedIndex].list.map((item:any, index:any) => (
          <div key={index}>
            {/* 传入图片源 (src) 和备用图片源 (fallbackSrc)，以及替代文本 (alt) */}
            <ImageFallback src={item.image}  fallbackSrc={items[selectedIndex].defaultImg}/>
          </div>
        ))}
      </div>

    </div>
  )
}

export default Fimage
